<template>
  <el-col :span="24" class="business-history" v-if="loading&&cons&&cons.length!==0">
    <affix :label="$t('business.businessHistory')">
      <el-col :span="24" style="padding-top:26px;">
      <time-line :items="cons" timeKey="time">
          <div
            class="item"
            slot="item"
            slot-scope="props">
            <div class="current-step">
              <div class="user font14" :class="props.item.special ? 'special-color': ''">{{props.item.user}}</div>
              <div class="middle">
                <span v-if="props.item.info.error">{{props.item.info.error}}</span>
                <span class="info-color new-business" v-else-if="props.item.info.action === 'create'">{{props.item.info.actionName}}</span>
                <div class="process" v-else-if="props.item.info.action === 'transformIn' || props.item.info.action === 'backIn'">
                <span class="start">
                  {{props.item.info.fromStepName}}
                </span>
                  <div class="goto">
                    <span class="todo">{{$t('business.action')}}【{{props.item.info.actionName}}】</span>
                    <span class="arrow">
                    </span>
                    <span class="next-master" :style="{visibility:props.item.info.nextMaster ? 'visible': 'hidden'}">【{{props.item.info.nextMaster}}】</span>
                  </div>
                  <span class="end">
                    {{props.item.info.stepName}}
                  </span>
                </div>
                <span class="info-color" :class="props.item.special ? 'special-color': ''" v-else-if="props.item.info.action !== 'transformIn' && props.item.info.action !== 'backIn'">{{props.item.info.actionName}}</span>
              </div>
              <div class="pc-time" v-if="props.item.info.action === 'transformIn' || props.item.info.action === 'backIn'">
                  <span class="time" v-if="props.item.isUShow==='true'">
                    <span v-bind:class="props.item.color">{{props.item.stepUseTime}}</span >
                    <template v-if="props.item.isUShow==='true' && props.item.isStepShow==='true'">
                      <span >/</span>
                      <span >{{props.item.stepTime}}</span>
                    </template>
                    <br>
                    <span class="time-discription">{{$t('business.stepCompleteTime')}}</span>
                    <template v-if="props.item.isUShow==='true' && props.item.isStepShow==='true'">
                      <span class="time-discription">/</span>
                      <span class="time-discription">{{$t('business.busStepTime')}}</span>
                    </template>

                    <!--<span v-if="props.item.isStepShow==='true'">{{props.item.stepTime}}</span>-->
                  </span>
              </div>
            </div>
            <table v-if="props.item.data&&!isEmpty(props.item.data)" class="once-step" border="0" cellspacing="0">
              <tbody valign="top">
              <template v-for="(one,index) in props.item.data">
                <tr :class="one.importantField==='true'?'redText':'data-item'" :key="index">
                  <td class="data-name">{{one.name}}</td>
                  <td class="break-all" v-if="typeof one.value === 'object'">
                    <div v-for="(item,idx) in one.value" :key="idx">
                      <globalPopup :url="common.getUrl(item, {useAttname: true})" :key="item.url2"
                                   @showBigImage="showBigImage"
                                   :name="item.name" :currObj="item" :srcUrl="common.getUrl(item, {useAttname: true})" :imgObj="props.item.data"></globalPopup>
                    </div>
                  </td>
                  <td class="break-all" v-else v-html="one.value"></td>
                </tr>
              </template>
              </tbody>
            </table>
          </div>
        </time-line>
    </el-col>
  </affix>
 </el-col>
</template>
<script>
  import Affix from '../../../ui-modules/affix/Affix'
  import TimeLine from '../../../ui-modules/affix/TimeLine'
  import { commitImg } from '@/utils/publicMethod.js'
  import { filterXSS } from '@/utils/m7Utils.js'
  import {checkform} from '@/utils/validate'
//  import * as types from '@/store/mutation-types.js'
  import globalPopup from '../../../ui-modules/affix/globalPopup.vue'
  import { isEmpty } from 'lodash'
  import { common } from '@/utils/cosUrl'
  import {taskTimeAll, getBusinessHisotryInfo, getBusinessHistoryDataNew} from '@/utils/workflowUtils.js'
  export default {
    name: 'busHistory',
    data () {
      return {
        iframeText: '',
        isShowText: false,
        loading: false,
        common
      }
    },
    props: {
      item: Object,
      // in为在工单模块展示， out为在服务工单展示
      type: {type: String, default: 'in'}
    },
    methods: {
      // 查看大图
      showBigImage (item, obj) {
        commitImg(item, obj)
      },
      checkImg (value) {
        if (checkform(value, 'Img')) {
          return false
        } else {
          return true
        }
      },
      regexlink (content) {
        var obstr = content;
        obstr = obstr.replace(/</g, " &lt;");
        obstr = obstr.replace(/>/g, "&gt; ");
        var re = /((https|http|ftp|rtsp|mms)?:\/\/)?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?(([0-9]{1,3}\.){3}[0-9]{1,3}|([0-9a-z_!~*'()-]+\.)*([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\.[a-z]{2,6})(:[0-9]{1,4})?(((\/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+\/?)|(\/?))/gi
        var re1 = /^(http:\/\/|https:\/\/)?/
        var arry1;
        var arry2=[];
        var index = 0
        while(arry1=obstr.match(re)){
            arry2.push(arry1[0]);
            obstr=obstr.replace(arry1[0],'m7#' + index + '#7m');
            ++index
        }
        var subos='';
        if(arry2.length){
            for(var i=0;i<arry2.length;i++){
                var hrefStr = arry2[i]
                var arry3=re1.exec(arry2[i])
                if(arry3[0]){
                    subos='<a href="' + hrefStr + '" target="_blank">' + arry2[i] + '</a>';
                }else{
                    subos='<a href="' + document.location.protocol + '//' + hrefStr + '" target="_blank">' + arry2[i] +'</a>';
                }
                obstr=obstr.replace('m7#' + i + '#7m',subos);
            }
        }
        return obstr
      },
      isEmpty (a) {
        return isEmpty(a)
      }
    },
    computed: {
      cons () {
        let history = this.item.history || []
        console.log(history)
        let showItem
        let showItems = []
        if (history instanceof Array) {
        } else {
          history = []
        }
        if (history.length === 0) {
          return []
        }
        let agent = this.$agentsMap() || {}
        for (var i = 0; i < history.length; i++) {
//          actionName
          let historyItem = history[i]
          if (historyItem.action && (historyItem.action === 'complete' || historyItem.action === 'cancel')) {
            continue
          }
          console.log(historyItem.master)
          let histroyMaster = historyItem.master
          if (historyItem.triggerName) {
            histroyMaster = historyItem.triggerName
          } else if (historyItem.action && historyItem.action === 'backIn') {
            histroyMaster = historyItem.excuteUser
          } else if (historyItem.action.indexOf('trigger') !== -1) {
            // 获取触发器名称
            histroyMaster = historyItem.excuteData.title
          }
          let time = history[i].time
          let dayClass = true
          let user = agent[histroyMaster] ? agent[histroyMaster].displayName + agent[histroyMaster].exten : histroyMaster
          let info = {}
          if (this.type === 'in' && historyItem.history_type === 'receive') {
            user = this.$t('public.customer')
          } else if (this.type === 'out' && historyItem.history_type === 'reply') {
            user = this.$t('business.serviceReply', {exten: historyItem.exten})
          } else if (this.type === 'out' && historyItem.history_type === 'receive') {
            user = user + this.$t('business.reply')
          } else if (this.type === 'out' && historyItem.action === 'assign') {
            user = this.$t('business.systemReply')
            info = {actionName: this.$t('business.serviceSetToMe', {exten: historyItem.excuteExten})}
          } else if (historyItem.action === 'customerUpdate') {
            info = {actionName: this.$t('business.customerUpdate1') + (historyItem.sourceCustomer ? historyItem.sourceCustomer : '空') +this.$t('business.customerUpdate2')+ (historyItem.targetCustomer ? historyItem.targetCustomer : '空')}
          } else if (historyItem.action === 'customerInsert') {
            info = {actionName: this.$t('business.customerUpdate1') + (historyItem.sourceCustomer ? historyItem.sourceCustomer : '空') +this.$t('business.customerUpdate2')+ (historyItem.targetCustomer ? historyItem.targetCustomer : '空')}
          } else if (historyItem.action === 'autoAssignEmpty') {
            info = {actionName: this.$t('business.autoAssignEmpty')}
          } else if (historyItem.action === 'autoAssignNotEmpty') {
            user = this.$t('business.orderSystem')
            info = {actionName: this.$t('business.autoAssignNotEmpty') + agent[historyItem.master].displayName}
          }
          if (this.type !== 'out' && historyItem.action !== 'customerUpdate' && historyItem.action !== 'customerInsert' && historyItem.action !== 'autoAssignEmpty' && historyItem.action !== 'autoAssignNotEmpty') {
            info = getBusinessHisotryInfo(historyItem, historyItem.step, historyItem.fromStep, historyItem.excuteAction)
          }
          let data = getBusinessHistoryDataNew(historyItem, this.item, 'businessFlow')
//          let _data = {}
          showItem = {
            time: time,
            user: user,
            info: info,
            data: data,
            special: (historyItem.history_type === 'receive' && this.type === 'in') || (historyItem.history_type === 'reply' && this.type === 'out'),
            dayClass: dayClass,
            _id: historyItem._id
          }
//          let flowObj = getCache('businessFlow', this.item.flow)
          let step = historyItem.ctype && historyItem.ctime ? taskTimeAll(historyItem.ctype, historyItem.ctime) : -1
          showItem.stepUseTime = historyItem.stepProcessTime ? taskTimeAll('second', historyItem.stepProcessTime) : -1
          showItem.color = showItem.stepUseTime > step && step !== -1 ? 'red' : ''
          showItem.stepTime = step
          showItem.isUShow = showItem.stepUseTime === -1 ? 'false' : 'true'
          showItem.isStepShow = showItem.stepTime === -1 ? 'false' : 'true'
          if (showItem.data.length) {
            showItem.data.forEach(item => {
              if (typeof item.value === 'string') {
                var str = filterXSS(item.value)
                item.value = this.regexlink(str)
              }
            });
          }
          showItems.push(showItem)
        }
        console.log(showItems)
        return showItems
      }
    },
    components: {
      Affix,
      TimeLine,
      globalPopup
    },
    beforeMount () {
      let self = this
      Promise.all([
        this.$store.dispatch('getCache', {type: 'businessFlowField'}),
        this.$store.dispatch('getCache', {type: 'agents'})
      ]).then(() => {
        self.loading = true
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .business-history
    padding 15px 0 0
    .icon-yulan
      color $c-main
      padding-left 5px
    .treat
        position relative
        padding 0 0 15px 28px
        margin-left 90px
        border-left 1px solid $c-border1
        .bac
          font-size 12px
          line-height 16px
          position absolute
          width 70px
          padding-right 8px
          left -88px
          top 20px
          margin-top 2px
          color $cf-gray4
          text-align right
          &:before
            content ""
            width 14px
            height 14px
            display inline-block
            position absolute
            top 0
            right -17px
            border-radius 50%
            background-color $c-border1
            border 1px solid $cf-white
          time
            display inline-block
            height 36px
            span
              margin-top 0
              display inline-block
        .dayclass
          &:before
            background-color $cf-level2
    .treat:last-child
      .bac
        &:before
          background-color $cf-level2
      li
        &:first-child
          border-left 0
          &:before
            content ""
            width 1px
            height: 100%;
            display inline-block
            position absolute
            top 35px
            left 0
            background-color $c-border1
        &:last-child
          margin-bottom: 40px
    .warpper
      padding 8px 10px 6px 10px
      border-radius 8px
      min-height 35px
      font-size 12px
      &:before
        content ''
        font-size 0
        line-height 0
        border-width 10px
        border-left-width 0
        border-style dashed
        border-right-style solid
        border-top-color transparent
        border-bottom-color transparent
        position absolute
        top 20px
        left 18px
      .name
        font-size 14px
        line-height 18px
        color $cf-gray1
          &:nth-child(2)
            padding-left 10px
            font-size 12px
            line-height 16px
      .name+.once-step
        margin 0
      .current-step
        display flex
        align-items center
        justify-content space-between
        .process
          display flex
          align-items center
          justify-content: center;
          .start
            color $cf-gray4
            font-weight bold
            font-size 14px
            line-height 18px
            text-align left
          .goto
            display flex
            flex-direction column
            text-align center
            margin 0 1em
            color $cf-level2
            .todo
              position relative
              text-align left
              color $cf-gray2
              text-align center
            .arrow
              display block
              positon relative
              width 230px
              height 1px
              border-bottom 2px solid $cf-gray7
              &:after
                content ''
                display block
                margin -6px 0 0 223px
                border-bottom 9px solid $cf-gray7
                border-right 9px solid transparent
          .end
            font-weight bold
            font-size 14px
            line-height 18px
            color $c-bus-step
      .once-step
        border-top 1px dotted $cf-level1
        width 100%
        margin-top 8px
        padding-top 8px
        line-height 20px
        color $cf-gray2
        .os-assign-Seats
        .os-process-Seats
          color $cf-level1
      .remark
        font-size 12px
        color $cf-level2
        margin-top 10px
        span
          display inline-block
          width 100%
          text-overflow ellipsis
          overflow hidden
          white-space nowrap
  .info-color
    color $cf-gray2
    display block
    font-size 14px
    padding-left 35px
  .new-business
    color $cf-gray4
    font-weight bold
  .next-master
    margin-top 1px
    color $cf-gray2
    max-width 200px
    display inline-block
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .user
    color $cf-gray2
    max-width 200px
    min-width 45px
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .icon-yulan
    padding-left 5px
    color $c-main
  .middle
    padding 0 10px
    flex-grow 1
  .pc-time
    min-width 110px
    color $cf-gray2
    .time-discription
      color $cf-gray6
  .data-item
    line-height 22px
    .data-name
      min-width 90px
      width 90px
      padding-right 15px
      color $cf-gray4
    .break-all
      color $cf-gray2
      word-break break-all
      white-space pre-line
  .redText
    line-height 22px
    color #ff6b6b
    .data-name
      min-width 90px
      width 90px
      padding-right 15px
    .break-all
      word-break break-all
      white-space pre-line
  .data-padding
    padding-top 20px
  .item
    padding 10px
  .red
    color $c-pink
  .special-color
    color $cf-color0
</style>
